<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/hd.css" />

  <!-- Demo styles -->
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide one" >
      	<div class="top">
      		<img src="images/one.png" alt="" />
      		
      	</div>
      	<!--戒指区域-->
      	<div class="bottom">
      		<img src="images/jiezhi.png" alt="" class="ring" />
      	</div>
      	<!--戒指区域结束-->
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  
  <!--音乐区域-->
  <div id="music">
  	<img src="images/music1.gif" alt="" class='music_bg'/>
  	<img src="images/music.jpg" alt="" class='music_pic'/>
  	<audio class='aud' src="images/许巍 - 曾经的你.mp3" preload="auto" loop="loop" ></audio>
  </div>
  <!--音乐区域结束-->

  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script src="js/hd.js"></script>
</body>
</html>
